$(function () {
    // alert(1)
    // 定义全局变量：open模态框时的索引
    var indexAdd = null
    var indexEdit = null
    // 获取数据并渲染，封装函数
    initArtCateList()
    function initArtCateList() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success(res) {
                if (res.status !== 0) return layui.layer.msg(res.messageg, { icon: 5 })
                var htmlStr = template('tpl_list', res)
                $('tbody').html(htmlStr)
            }
        })
    }
    // 单击添加，弹出模态框
    $('#btnAddCate').on('click', function () {
        indexAdd = layui.layer.open({
            type: 1,
            title: '添加分类',
            area: ['500px', '300px'],
            /*   content: `
               <input type="text" name='name'>
               </br>
               <input type="text" name='alias'>
             ` */
            //    取用模板引擎的值
            content: $('#dialog-add').html()
        })
    })
    // 完成添加功能
    // 模态框和添加分类的表单是动态渲染到页面的，而且是添加到body里，so，绑定事件要用事件委托
    $('body').on('submit', '#form-add', function (e) {
        e.preventDefault()
        var data = $(this).serialize()
        // console.log(data);
        // 调接口，发请求
        $.ajax({
            method: 'POST',
            url: '/my/article/addcates',
            data,
            success(res) {
                // layui.layer.close(indexAdd) //本来应该放到成功之后，但是服务器出问题了
                if (res.status !== 0) return layui.layer.msg(res.message, { icon: 5 })
                layui.layer.msg(res.message, { icon: 6 }, function () {
                    //  重新渲染
                    initArtCateList()
                    // 关闭模态框
                    layui.layer.close(indexAdd)
                })

            }

        })

    })
    // 编辑功能，弹出编辑模态框，通过事件委托
    $('tbody').on('click', '.btn-edit', function () {
        indexEdit = layui.layer.open({
            type: 1,
            area: ['500px', '300px'],
            content: $('#dialog-edit').html()
        })
        var id = $(this).attr('data-id')
        $.ajax({
            method: 'GET',
            url: '/my/article/cates/' + id,
            success(res) {
                // console.log(res
                if (res.status !== 0) return layui.layer.msg(res, messageg, { icon: 5 })
                layui.form.val('form-edit', res.data)
            }

        })
    })
    // 完成编辑功能
    $('body').on('submit', '#form-edit', function (e) {
        e.preventDefault()
        // 获取当前类别的信息并渲染到模态框
        var data = $(this).serialize()
        //获取当前被编辑分类的id:添加的时候就给加自定义属性   
        $.ajax({
            method: 'POST',
            url: '/my/article/updatecate',
            data,
            success(res) {
                // console.log(res
                if (res.status !== 0) return layui.layer.msg(res, messageg, { icon: 5 })
                layui.form.val('form-edit', res.data)
                // console.log(res);
                initArtCateList()
                layui.layer.close(indexEdit)
            }

        })
    })
    // 删除
    $('tbody').on('click','.btn-delete',function(){
        var id = $(this).attr('data-id')
        layer.confirm('您确定要删除此项?', {icon: 3, title:'提示'}, function(index){
            //do something
            $.ajax({
                // 不写method默认是get方式
                url:'/my/article/deletecate/' + id,
                success(res){
                    // console.log(res);
                    if (res.status !== 0) return layer.msg(res.message,{icon:5})
                    layui.layer.msg(res.message, { icon: 6 })
                    initArtCateList()
                }
            })
            layer.close(index);
          })
    })
})